<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>View All Data</title>
	<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css" />
</h:head>
<body>
	<h:form>
		<h:outputText value="Sort By:" />
		<h:selectOneMenu id="sort" value="#{fetchdata.sort}">
			<f:selectItem itemLabel="Name" itemValue="Name" />
			<f:selectItem itemLabel="DOB" itemValue="DOB" />
		</h:selectOneMenu>
		<h:outputText value="Order By:" />
		<h:selectOneMenu id="order" value="#{fetchdata.order}">
			<f:selectItem itemLabel="Asc" itemValue="Asc" />
			<f:selectItem itemLabel="Desc" itemValue="Desc" />
		</h:selectOneMenu>
		<h:commandButton update="dataBox2" 
			action="#{fetchdata.handleChoiceChange()}" value="Sort" />
		<h:panelGrid id="dataBox2" columns="4" style="width:auto">
			<h:dataTable value="#{fetchdata.allUsers}" var="u"
				style="border: 1px solid silver" styleClass="user-table"
    			headerClass="user-table-header"
    			rowClasses="user-table-odd-row,user-table-even-row">
				<h:column>
					<f:facet name="header">Name</f:facet>
					<h:outputText value="#{u.name}" />
				</h:column>
				<h:column>
					<f:facet name="header">Email</f:facet>
					<h:outputText value="#{u.email}" />
				</h:column>
				<h:column>
					<f:facet name="header">DOB Month</f:facet>
					<h:outputText value="#{u.dobMonthString}" />
				</h:column>
				<h:column>
					<f:facet name="header">Dob Date</f:facet>
					<h:outputText value="#{u.dobDateString}" />
				</h:column>
			</h:dataTable>
		</h:panelGrid>
	</h:form>
</body>
</html>